<template>
  <div class="layout-header-top">
    <div class="header-left">
      <div class="immersive-icon">
        <i @click="useSetCollaps" @mouseenter="useOpenImmersiveMenu" @mouseleave="useCollapsLeave" class="iconfont cp" :class="collapse ? 'icon-shouqi' : 'icon-zhankai'"></i>
        <strong>{{ isImmersive ? APP_TITLE : name }}</strong>
      </div>
      <!-- <div class="immersive-icon" v-if="isImmersive">
        <i @click="useSetCollaps" @mouseenter="useOpenImmersiveMenu" @mouseleave="useCollapsLeave" class="iconfont cp" :class="collapse ? 'icon-shouqi' : 'icon-zhankai'"></i>
        <span>基础资源管理</span>
      </div> -->
      <Crumbs v-if="isImmersive" />
      <div v-else class="header-tabs-menu"><TabsMenu /></div>
    </div>
    <div class="header-right"><QuickMenu /></div>
  </div>
</template>
<script setup>
  import { computed } from "vue"
  import { useRouter } from "vue-router"
  import TabsMenu from "./tabsMenu/index.vue"
  import QuickMenu from "./quickMenu/index.vue"
  import Crumbs from "./crumbs/index.vue"
  import { APP_TITLE } from "@/constant"
  // hook
  import { useCollaps } from "@/hook/index"
  const router = useRouter()
  const { useOpenImmersiveMenu, useCollapsLeave, useSetCollaps, useGetCollasp, useIsImmersive } = useCollaps()
  const collapse = computed(() => useGetCollasp())
  const isImmersive = computed(() => useIsImmersive())

  const name = computed(() => {
    const currentRouter = router.currentRoute.value
    return currentRouter.matched[0]?.meta?.title
  })
</script>
<style lang="scss" scoped>
  .immersive-icon {
    position: relative;
    display: flex;
    align-items: center;
    padding-right: 24px;
    padding: 0 16px 0 12px;
    transition: 0.3s;
    strong {
      margin-left: 8px;
      line-height: 1;
      color: var(--n-black-light-1);
    }
    &:after {
      content: "";
      position: absolute;
      top: 50%;
      right: 0;
      margin-top: -7px;
      height: 14px;
      border-left: 1px solid #ebedf0;
    }
  }
  .layout-header-top,
  .layout-header-bottom {
    height: var(--n-header-menu-height);
    position: relative;
    display: flex;
    align-items: center;
  }
  .layout-header-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .header-left {
    flex: 1;
    width: 0;
    display: flex;
    align-items: center;
  }

  .header-left-collapse {
    display: flex;
    align-items: center;
  }
  .header-left-tabs-menu {
    flex: 1;
    width: 0;
  }
  .disabled-mask {
    position: absolute;
    top: 0;
    right: 105px;
    bottom: 0;
    left: 0;
    z-index: 10;
  }
</style>
